<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="~{theme/breezyCV/layout}">
<head>
    <link rel="stylesheet" th:href="@{${baseLink} + '/source/fonts/font-awesome/css/font-awesome.min.css'}" />
</head>
<body>
<div layout:fragment="content">
    <div class="page-title">
        <h2>文章</h2>
    </div>

    <div class="single-page-area">
        <div class="single-page-content">
            <div class="section-content">
                <div class="row">
                    <div class="col-md-12">
                        <div class="blog-masonry two-columns clearfix">
                            <div class="item" th:each="post,iterStat : ${pageInfo.data}">
                                <div class="blog-card">
                                    <div class="media-block">
                                        <div class="category">
                                            <a th:href="@{'/categories/'+${post.categoryName}+'/'}" th:text="${post.categoryName}"></a>
                                        </div>
                                        <span class="post-item-top" th:if="${post.top}">
                                        <img th:src="@{'/theme/breezyCV/source/images/article-top.png'}" alt="" width="48" height="48">
                                    </span>
                                        <a th:href="@{'/' + ${post.link}}">
                                            <img th:src="@{${post.coverUrl}}" class="size-blog-masonry-image-two-c" width="100%" height="200" alt="" title="" />
                                            <div class="mask"></div>
                                        </a>
                                    </div>
                                    <div class="post-info">
                                        <div class="post-date"><i class="lnr lnr-calendar-full"></i> [[${post.publishDate}]]</div>
                                        <div class="post-comment"><i class="lnr lnr-cloud"></i> [[${post.commentNum}]]</div>
                                        <h4 class="blog-item-title"><a th:href="@{'/' + ${post.link}}" th:text="${post.title}"></a></h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="white-space-20"></div>

                <nav class="pagination">
                    <span th:if="${pageInfo.hasPreviousPage}" class="nav-page">
                        <a data-pjax class="prev page-numbers" th:href="@{${pageInfo.pageNum-1} == 1 ? '/' : '/blogs/page/' + ${pageInfo.pageNum-1}+'/'}" ><i class="fa fa-angle-left"></i></a>
                    </span>
                    <span th:each="pageNum : ${pageInfo.navigatepageNums}" th:if="${pageInfo.navigatepageNums.length} le '4' " class="nav-page">
                        <a th:if="${pageNum == pageInfo.pageNum}" href="javascript:void(0)" class="page-numbers current" th:text="${pageNum}"></a>
                        <span class="page" th:if="${pageNum != pageInfo.pageNum}">
                            <a data-pjax th:href="@{'/blogs/page/' + ${pageNum}+'/'}" th:text="${pageNum}"></a>
                        </span>
                     </span>
                    <span th:each="pageNum, iterStat : ${pageInfo.navigatepageNums}" th:if="${pageInfo.navigatepageNums.length} gt '4' " class="nav-page">
                       <span class="nav-page" th:if="${pageNum == pageInfo.pageNum and iterStat.count gt 2 and iterStat.count le iterStat.size}">...</span>
                       <a th:if="${pageNum == pageInfo.pageNum}" href="javascript:void(0)" class="page-numbers current" th:text="${pageNum}"></a>
                       <span class="nav-page" th:if="${pageNum == pageInfo.pageNum and iterStat.count le (iterStat.size - 2)}">...</span>
                       <span th:if="${pageNum != pageInfo.pageNum}">
                           <span class="nav-page" th:if="${iterStat.count == 1}" ><a data-pjax th:href="@{'/blogs/page/1/'}" th:text="1"></a></span>
                           <span class="nav-page" th:if="${iterStat.count == (iterStat.size)}"><a data-pjax th:href="@{'/blogs/page/' + ${pageNum}+'/'}" th:text="${pageNum}"></a></span>
                        </span>
                   </span>
                    <span th:if="${pageInfo.hasNextPage}" class="nav-page">
                        <a data-pjax class="next page-numbers" th:href="@{'/blogs/page/' + ${pageInfo.pageNum+1}+'/'}" ><i class="fa fa-angle-right"></i></a>
                    </span>
                </nav>
                <br>
            </div>
        </div>
    </div>

</div>
</body>
</html>